<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户资料</title>
    <script src="../layui/jquery-3.2.1.min.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="js/user.js"></script>
    <link href="../layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-container">
    <!-- 用户表单数据-->
    <table class="layui-table">
        <thead>
        <tr><th>用户名</th><th>密码</th><th>角色</th><th>真实姓名</th><th>操作</th></tr>
        </thead>
        <tbody id="userTableBody"></tbody>
    </table>
    <!-- 分页div-->
    <div id="cutPageDiv"></div>

    <!-- 添加按钮和信息查询-->
    <div class="layui-row">
        <div  class="layui-col-md4">
            <a href="javascript:add()" class="layui-btn layui-btn-warm">
                <i class="layui-icon layui-icon-add-circle"></i>添加</a>
        </div>
        <div  class="layui-col-md8">
            用户名称: <input type="text" id="userName">
            <a href="javascript:getUserInfo(1)" class="layui-btn layui-btn-normal">查询</a>
        </div>
    </div>

    <!-- 添加弹出 -->
    <div style="display: none" id="addDiv">
        <form id="addForm">
            <div class="layui-row" style="margin-top: 20px">
                <div  class="layui-col-md6">
                    用户名： <input type="text" id="code" name="code" onblur="checkName()">
                    <span id="codeSpan" style="color: red;font-weight: bold"></span>
                </div>
                <div  class="layui-col-md6">
                    真实姓名： <input type="text" id="name" name="name" onblur="checkName()">
                    <span id="nameSpan" style="color: red;font-weight: bold"></span>
                </div>
            </div>
            <div id="role">
                <br>拥有角色：
            </div><br>
            <div >
                <br>拥有权限：<span id="root"></span>
            </div><br>
            <a href="javascript:addUser()" class="layui-btn layui-btn-warm">
                <i class="layui-icon layui-icon-add-circle"></i>添加</a>
        </form>
    </div>

    <!-- 修改弹出 -->
    <div style="display: none" id="updateDiv">
        <form id="updateForm">
            <input type="hidden" name="id" id="id">
            <div class="layui-row">
                <div  class="layui-col-md6">
                    用户名： <span  id="updateCode" ></span>
                </div>
                <div  class="layui-col-md6">
                    真实姓名： <span  id="updateName"></span>
                </div>
            </div>
            <div id="updateRole">
                拥有角色：
            </div>
            <div id="updateRoot">
                拥有权限：<span id="rootSpan"></span>
            </div>
            <a href="javascript:updateUser()" class="layui-btn layui-btn-warm">
                <i class="layui-icon layui-icon-add-circle"></i>修改</a>
            <a href="javascript:closeLayer()" class="layui-btn layui-btn-danger">
                <i class="layui-icon layui-icon-add-circle"></i>取消</a>
        </form>
    </div>

</div>


</body>
</html>